<template>
  <ul class="tabbar">
    <li @click="pushTo(index)" v-for="(item, index) in routerList" :key="item.name">
      <div :class="store.active === index && 'active'" class="item">
        <van-icon size="20rem" :name="item.icon" />
        <span v-show="store.active === index">{{ item.name }}</span>
      </div>
    </li>

  </ul>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from 'vue';
import { useTabbarStore } from "@/store";
const router = useRouter()
const route = useRoute()
const store = useTabbarStore()
const routerList = ref<{ icon: string, name: string }[]>([
  { icon: "wap-home-o", name: "home" },
  { icon: "search", name: "search" },
  { icon: "orders-o", name: "record" },
  { icon: "user-o", name: "user" }])
const pushTo = (index: number) => {
  router.push({ path: "/" + routerList.value[index].name })
}
onMounted(() => {
  let timer = setInterval(() => {
    if (route.path && route.path !== '/') {
      const index = routerList.value.findIndex(item => '/' + item.name === route.path)
      if (index !== -1) {
        store.active = index
      } else {
        store.active = -1
      }
      clearInterval(timer)
      timer = null
    }
  }, 100)
})
</script>

<style lang="scss">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  @include flex($jc: space-evenly, $ai: center);
  height: 44rem;
  background-color: var(--background-color);
  color: var(--font-color);
  box-shadow: 0rem 4rem 25rem 2rem rgba(0, 0, 0, 0.12);

  li {
    height: 30rem;
    width: 68rem;
    position: relative;

    span {
      font-size: 12rem;
      width: 34rem;
      text-align: center;
    }

    .item {
      width: 30rem;
      @include absolutePOS($r: 15rem, $t: 0);
      @include flex($jc: center, $ai: center);
      height: 30rem;
      transition: .3s;
      border-radius: 22rem;
      padding: 0 8rem;

      &.active {
        right: 0;
        background-color: $color-yellow;
        width: auto;
      }
    }
  }
}
</style>